<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>作者</td>
                <td>出版社</td>
            </tr>
            <tr v-for="item in books">
                <td v-text="item.id"></td>
                <td v-text="item.name"></td>
                <td v-text="item.author"></td>
                <td v-text="item.publish"></td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Book",
        data() {
            return {
                msg: "hello vue",
                books: [{
                    id: 1,
                    name: 'java零基础实战',
                    author: '张三',
                    publish: '机械工业出版社'
                },
                    {
                        id: 2,
                        name: 'Python入门',
                        author: '李四',
                        publish: '人民邮电出版社'
                    },
                    {
                        id: 3,
                        name: '关于爱情',
                        author: '张小娴',
                        publish: '长江文艺出版社'
                    }
                ]
            }
        },
        created() {
            // 此处的this是vue对象
            const _this = this
            axios.get('http://localhost:8991/book/all').then(function (response) {
                // console.log(response)
                // 此处的this是回调对象
                _this.books = response.data
            })
        }
    }
</script>

<style scoped>

</style>
